.live-box{
  display: flex;
  margin-top: 100px;
  .video-container {
    position: relative;
    height: 485px;
    margin-right: 20px;
    .live-video {
      width: auto;
      background-color: #101010;
      height: 485px;
    }
    #myCanvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      pointer-events: none; /* 允许事件穿透 canvas 到达下面的视频控件 */
    }
    .controls-box,.linear-box{
      position: absolute;
      bottom: 0px;
      height: 40px;
      width: 100%;
      padding: 0; /* 确保没有内边距 */
      margin: 0; /* 确保没有外边距 */
      background-color: #4747477d;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      z-index: 2000;
      .controls-left{
        display: flex;
        align-items: center;
        .text{
          margin-right: 20px;
          color: #fff;

        }
        .el-slider{
          width: 200px;
        }
        .el-link{
          color: #FFFFFF;
        }
        .linear-controls-box{
          display: flex;
          align-items: center;
          margin: 0 10px;
          cursor: pointer;
          &:hover{
            border-bottom: 1px solid #1ABC9C ;
          }
          .linear-controls-item{
            color: #FFFFFF;
            display: flex;
            align-items: center;
            .item-circle{
              background-color: rgba(255,255,255,1);
              width: 14px;
              height: 14px;
              border-radius: 50%;
              display: inline-block;
              margin-right: 5px;
            }
            .item-yellow{
              color: rgba(252,202,0,1);
              margin-right: 5px;
            }
          }
          .el-icon,.full-screen{
            color: #FFFFFF;
          }
        }
      }
      .full-screen{
        font-size: 14px;
        cursor: pointer;
      }
      .linear-controls{
        height: 100%;
        width: 100%;
        .linear-controls-header{
          display: flex;
          justify-content: space-between;
          color: #fff;
          border-bottom: 1px solid #FFFFFF;
          padding: 10px;
          .el-link{
            color: #fff;
          }
        }
        .linear-controls-tab{
          color: white;
        }
        .linear-content{
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100% - 80px); /* 减去头部高度 */
        }
      }
    }
    .mark-box{
      height: 40px;
      display: flex;
      align-items: center;
      .el-switch{
        margin:0 10px;
      }
      .el-link{
        margin: 0 20px;
        font-size: 16px;
        
      }
    }
  }
  .no-plugin{
    height: 485px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 785px;
    background-color: rgba(89,90,92,1);
    margin-right: 20px;
    img{
      width: 122px;
      height: 122px;
      margin-bottom: 18px;
    }
    .title{
      color: rgba(206,206,206,1);
      font-size: 16px;
      margin-bottom: 18px;
    }
    .text{
      color: rgba(206,206,206,1);
      font-size: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      width: 480px;
      .text1{
        display: inline-block; 
        width: 390px;
      }
    }
    .el-link{
      color: #1ABC9C;
    }
  }
  .menu-box{
    width: 300px;
    height: 485px;
    background-color: rgba(249,249,249,1);
    padding: 30px 15px;
    .el-input{
      margin-bottom: 20px;
    }
    .el-button{
      display: block;
      margin: 30px auto 50px auto;
      width: 78px;
      background-color: rgba(26,188,156,1);
      border: 0;
    }
    .tips{
      line-height: 17px;
      color: rgba(222,134,143,1);
      font-size: 12px;
    }
  }
}